<template>
  <div class="kepulist2">
    <div class="kepulist-top">
      <span>
        <van-icon
          name="arrow-left"
          style="font-size: 60px; line-height: 100px"
          @click="$router.push('/kepu')"
        />
        <span class="xq"> {{ item.title }}</span><span><van-icon name="replay" style="float: right; font-size: 50px; margin-top: 40px;" @click="showPopup" /></span>
        </span>
    </div>
    <div class="kepulist2-sp">
      <img
        src="https://www.bing.com/th/id/OGC.081dc16416c898ad2ee44b4214424713?pid=1.7&rurl=https%3a%2f%2fwimg.588ku.com%2fgif%2f21%2f05%2f12%2f0dd2455fb8fe74b38528036aa0a6fba1.gif&ehk=7KTl5qD3PBQCPtbgCzbnzmYubTPnEqMGFiefsX6kmkA%3d"
        alt=""
      />
    </div>
    <div class="kepulist2-main">
      <div class="title">
        {{ item.title }}
      </div>
      <div class="yesi">
        <div class="tx-xq">
          <img
            src="https://tse3-mm.cn.bing.net/th/id/OIP-C.UZJ39CfXAPCBm63euHZSJAAAAA?w=185&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7"
            alt=""
          />
        </div>
        <div class="mz-top">
          <div class="xm">
            {{ item.name }}
          </div>
          <div class="vip1">
            <img src="../../assets//guahao_img/vip.png" alt="" />
          </div>
          <div class="zy">
            {{ item.position }}
          </div>
        </div>
        <div class="ks">
          <div class="ks1">
            {{ item.class }}
          </div>
          <div class="ks2">
            {{ item.hospital }}
          </div>
        </div>
      </div>
      <div class="di">
        <div class="di-top">
          {{ item.chi }}
        </div>
        <div class="di-botton">
          <div class="time">发布于{{ item.date }}</div>
          <div class="browse">
            <van-icon name="eye-o" />
            {{ item.browse }}
          </div>
        </div>
      </div>
      <div class="tip">
        <span>
          友情提示：以上内容仅供参考，具体诊疗请遵医嘱，妙手医生版权说有未经允许不得转载
        </span>
      </div>
      <div class="swp">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item>
            <img
              src="https://tse3-mm.cn.bing.net/th/id/OIP-C.y09YLjHYgYieK1n9ouWFMAHaD9?w=198&h=106&c=7&r=0&o=5&pid=1.7"
              alt=""
            />
          </van-swipe-item>
          <van-swipe-item>
            <img
              src="https://tse2-mm.cn.bing.net/th/id/OIP-C.Qv7ulFNRUpLincNdVjEi3QHaCs?w=349&h=127&c=7&r=0&o=5&pid=1.7"
              alt=""
            />
          </van-swipe-item>
          <van-swipe-item>
            <img
              src="https://tse4-mm.cn.bing.net/th/id/OIP-C.n9u0cQ791r8IwohuClMRNQHaDt?w=323&h=175&c=7&r=0&o=5&pid=1.7"
              alt=""
            />
          </van-swipe-item>
          <van-swipe-item>
            <img
              src="https://tse3-mm.cn.bing.net/th/id/OIP-C.MLPNaiU5vBpQm2JnPmoJmgHaEK?w=296&h=180&c=7&r=0&o=5&pid=1.7"
              alt=""
            />
          </van-swipe-item>
        </van-swipe>
      </div>
      <div class="ad">
        <div class="Specialist">
          {{ item.title }}
        </div>
        <div class="wen">
          <span class="wen1">问</span>
          {{ item.class }}
        </div>
        <div class="da">
          <span class="da1">答</span>
          {{ item.chi }}
        </div>
        <div class="ck">
          <button><a href="https://www.baidu.com/">查看更多></a></button>
        </div>
        <div class="jxtj">精选推荐</div>
      </div>
      <div class="recommend">
        <div class="nrtj">内容推荐</div>
        <div class="recommend1">
          <div class="title1">
            {{ item.title }}
          </div>
          <div class="chi1">
            {{ item.chi }}
          </div>
          <div class="ys">
            <div class="ym">
              {{ item.name }}
            </div>
            <div class="svip">
              <img src="../../assets/guahao_img/vip.png" alt="" />
            </div>
            <div class="physician">
              {{ item.position }}
            </div>
          </div>
        </div>
        <div class="GG">
          <div class="image">
            <img
              src="https://tse2-mm.cn.bing.net/th/id/OIP-C.p43sn4WqcdpgR83mXRo12gAAAA?w=159&h=176&c=7&r=0&o=5&dpr=1.5&pid=1.7"
              alt=""
            />
          </div>
          <div class="kf">
            <div class="kf1">人工客服在线咨询</div>
            <div class="kf2">客服人工在线咨询</div>
            <div class="kf3">4.7万阅读</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { useRoute } from 'vue-router'
import { ref } from 'vue'
import axios from 'axios'
const route = useRoute()
const item = ref()
// 从路由获取id
let id = ref(route.query.id)
// 从接口中调出详情
const list = () => {
  axios.get('/api/science', { params: { id: id.value } }).then((res) => {
    item.value = res.data.data
  })
}
list()
const showBottom = ref(false);
    const showPopup = () => {
      showBottom.value = true;
    };
</script>


<style lang="scss" scoped>
.kepulist2 {
  width: 100%;
  height: 100%;
  background: #ccc;
  .kepulist-top {
    width: 100%;
    height: 100px;
    position: fixed;
    top: 0;
    z-index: 999;
    float: left;
    background: #fff;
    .xq {
      margin-left: 20%;
      font-size: 35px;
      line-height: 100px;
      text-align: center;
    }
  }
  .kepulist2-sp {
    width: 100%;
    height: 450px;
    float: left;
    border-bottom: 1px solid #ccc;
    img {
      width: 100%;
      height: 400px;
    }
  }
  .kepulist2-main {
    width: 100%;
    height: 100%;
    margin-top: 30px;
    float: left;
    .title {
      width: 95%;
      height: 60px;
      font-size: 40px;
      margin-left: 2.5%;
    }
    .yesi {
      width: 100%;
      height: 150px;
      float: left;
      .tx-xq {
        width: 100px;
        height: 100px;
        margin-top: 25px;
        margin-left: 20px;

        img {
          width: 100%;
          height: 100%;
          border-radius: 45px;
        }
      }
      .mz-top {
        width: 70%;
        height: 50px;
        // float: left;
        margin-left: 160px;
        margin-top: -100px;
        .xm {
          width: 100px;
          height: 50px;
          float: left;
          font-size: 30px;
        }
        .vip1 {
          width: 30px;
          height: 30px;
          margin-top: 10px;
          float: left;
          margin-left: 20px;
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
      .zy {
        width: 130px;
        height: 50px;
        float: left;
        margin-left: 20px;
        line-height: 50px;
        font-size: 26px;
        color: #9c9c9c;
      }
    }
    .ks {
      width: 70%;
      height: 50px;
      // float: left;
      margin-left: 160px;
      margin-top: 5px;
      .ks1 {
        width: 200px;
        height: 50px;
        float: left;
        line-height: 50px;
        color: #686868;
        font-size: 24px;
      }
      .ks2 {
        width: 300px;
        height: 50px;
        float: left;
        margin-left: 20px;
        line-height: 50px;
        color: #686868;
        font-size: 24px;
      }
    }
    .di {
      width: 95%;
      height: 350px;
      float: left;
      font-size: 30px;
      margin-left: 2.5%;
      line-height: 80px;
      .di-top {
        width: 100%;
        height: 250px;
        float: left;
      }
      .di-botton {
        width: 100%;
        height: 100px;
        float: left;
        .time {
          width: 300px;
          height: 100px;
          float: left;
          line-height: 140px;
          color: #666666;
          font-size: 25px;
        }
        .browse {
          width: 200px;
          height: 100px;
          float: left;
          margin-left: 20px;
          line-height: 140px;
          color: #666666;
          font-size: 25px;
        }
      }
    }
    .tip {
      width: 95%;
      height: 100px;
      float: left;
      margin-left: 2.5%;
      span {
        margin-top: -20px;
        font-size: 20px;
      }
    }
    .swp {
      width: 95%;
      height: 200px;
      margin-left: 2.5%;
      float: left;
      margin-bottom: 30px;
      img {
        width: 100%;
        height: 200px;
      }
    }
    .ad {
      width: 95%;
      height: 300px;
      background: #fff;
      float: left;
      margin-left: 2.5%;
      border-radius: 15px;
      .Specialist {
        width: 100%;
        height: 50px;
        // background: gold;
      }
      .wen {
        width: 100%;
        height: 50px;
        // background: orange;
        .wen1 {
          width: 30px;
          height: 30px;
          background: #fdf2de;
          color: #f5a623;
        }
      }
      .da {
        width: 100%;
        height: 110px;
        line-height: 50px;
        // background: orangered;
        .da1 {
          width: 30px;
          height: 30px;
          background: #e5f9f9;
          color: #00c8c8;
        }
      }
      .ck {
        width: 100%;
        height: 45px;
        // background: palegreen;
        button {
          margin-left: 40%;
          background: #fff;
          border: none;
          line-height: 45px;
        }
      }
      .jxtj {
        width: 100%;
        height: 45px;
        // background: pink;
        font-size: 20px;
      }
    }
    .recommend {
      width: 95%;
      height: 500px;
      margin-left: 2.5%;
      float: left;
      .nrtj {
        width: 100%;
        height: 50px;
        line-height: 50px;
        font-size: 40px;
        font-weight: 500;
      }
      .recommend1 {
        width: 100%;
        height: 250px;
        .title1 {
          width: 100%;
          height: 50px;
          font-size: 30px;
          line-height: 50px;
          margin-top: 20px;
        }
        .chi1 {
          width: 100%;
          height: 100px;
          font-size: 25px;
          margin-top: 10px;
        }
        .ys {
          width: 100%;
          height: 50px;
          .ym {
            width: 70px;
            height: 50px;
            float: left;
            font-size: 25px;
            line-height: 50px;
          }
          .svip {
            width: 30px;
            height: 30px;
            float: left;
            margin-left: 20px;
            margin-top: 10px;
            img {
              width: 100%;
              height: 100%;
            }
          }
          .physician {
            width: 200px;
            height: 50px;
            float: left;
            line-height: 50px;
            font-size: 25px;
            margin-left: 20px;
          }
        }
      }
      .GG {
        width: 100%;
        height: 150px;
        margin-top: 20px;
        .image {
          width: 150px;
          height: 150px;
          float: left;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .kf {
          width: 560px;
          height: 150px;
          float: left;
          .kf1 {
            width: 100%;
            height: 50px;
            float: left;
            line-height: 50px;
            font-size: 20px;
            font-weight: 600;
          }
          .kf2 {
            width: 100%;
            height: 50px;
            float: left;
            line-height: 50px;
            font-size: 17px;
          }
          .kf3 {
            width: 70px;
            height: 50px;
            float: right;
            line-height: 70px;
            font-size: 15px;
            color: #9c9c9c;
          }
        }
      }
    }
  }
}
</style>
